<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                        style="float: right"
                        @click="handleSearchList()"
                        type="primary"
                        size="small">
                    查询
                </el-button>
                <el-button
                        style="float: right;margin-right: 15px"
                        @click="handleResetSearch()"
                        size="small">
                    重置
                </el-button>
                <el-button
                        style="float: right;margin-right: 15px"
                        @click="reload()"
                        size="small">
                    重加载
                </el-button>
            </div>
            <div style="margin-top: 15px;float: left;margin-bottom: 30px">

                    <span class="demonstration"style="margin-left: 30px;margin-right: 20px">选择日期范围(一个月之内)</span>
                <el-date-picker
                        v-model="value"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']"
                        :picker-options="pickerOptions"
                        :disabled="disable2"
                        :change="onpick2()">
                </el-date-picker>





            </div>
        </el-card>

        <el-card class="operate-container" shadow="never">
            <el-table
                    :data="tableData"
                    stripe
                    v-loading="listLoading"
                    style="width: 100%">
                <el-table-column
                        prop="userName"
                        label="用户"
                        width="180"
                        :formatter="format1">
                </el-table-column>
                <el-table-column
                        prop="userRole"
                        label="权限"
                        width="180"
                        :formatter="format2">
                </el-table-column>
                <el-table-column
                        prop="userIp"
                        label="IP地址">
                </el-table-column>

                <el-table-column
                        prop="handleModule"
                        label="操作模块">
                </el-table-column>
                <el-table-column
                        prop="context"
                        label="操作内容">
                </el-table-column>

                <el-table-column
                        prop="handleTime"
                        label="发生时间">
                </el-table-column>
            </el-table>
        </el-card>
        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="pageSize"
                    :page-sizes="[5,10,15]"
                    :current-page.sync="pageNum"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "OperateLogManage",
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        if(new Date(time).getTime()>new Date().getTime()){

                            return time.getTime() >= (new Date().getTime()) ;//时间范围必须是时间戳
                        }else{
                            return time.getTime() < Date.now() - 30*3600 * 1000 * 24;//30天之内 根据自己需求来定
                        }
                    },

                },
                value:'',

                disable2:false,
                flag:0, //初始加载所有记录  flag=1  查询加载记录 （用于翻页辨别）
                tableData: [],
                pageNum:1,
                pageSize:10,
                total: 0,
                listLoading: true,
                pageNumFlag:0
            }
        },
        methods:{
            reload(){
                this.$router.go(0)
            },
            format1(row, column, cellValue){
                return row.userName === "游客" ? '--' : row.userName;
            },
            format2(row, column, cellValue){
                var role = ''
                if(row.userRole === 0){
                    role = '管理员'
                }else if(row.userRole === 1){
                    role = '用户'
                }
                else if(row.userRole === 2){
                    role = '商家'
                }else{
                    role = '游客'
                }
                return role;
            },
            handleSearchList() {
                this.listLoading = true;

                var vm = this;
                if(this.value === '' ){
                    this.getOperateLog()
                }
                this.service.get('/operatelog/operateLog/selectByDatePart.do',{
                    params:{
                        startTime:vm.value[0],
                        endTime:vm.value[1],
                        pageNum:this.pageNum,
                        pageSize:vm.pageSize
                    }
                }).then(res => {
                    if(res.data.status === 0){
                        vm.tableData = res.data.data.list
                        vm.listLoading = false
                        vm.total = res.data.count
                        vm.flag =1
                    }
                    console.log(res)
                })
            },
            handleResetSearch() {
              this.value = ''

            },

            onpick2(){
                console.log(this.value)


            },
            getOperateLog(){
                this.listLoading = true;
                var vm = this;
                this.service.get('/operatelog/operateLog/selectAll.do',{
                    params:{
                        pageNum:vm.pageNum,
                        pageSize:vm.pageSize
                    }
                }).then(res => {
                    if(res.data.status === 0){
                        vm.tableData = res.data.data.list
                        vm.listLoading = false
                        vm.total = res.data.data.total
                        vm.flag =0
                    }
                    console.log(res)
                })
            },
            handleSizeChange(val) {
                //console.log(val);
                this.pageNum = 1;
                this.pageSize = val;
                if(this.flag === 1){
                    this.handleSearchList()
                }else{
                    this.getOperateLog();
                }


            },
            //页数前进
            handleCurrentChange(val) {
                this.pageNum = val;
                if(this.flag === 1){

                    this.handleSearchList()
                }
                else{
                    this.getOperateLog();
                }
            },

        },
        mounted() {
            this.getOperateLog()
        }
    }
</script>

<style scoped>

</style>